<template>
    <view class="content">
        <text>{{label}}</text>
        <input class="inputbox" type="text" v-model="value" :placeholder="placeholder" />
        <checkbox class="checkbox" :checked="checked" @tap="oncheckbox">点击选中</checkbox>
    </view>
</template>

<script>
    export default {
        name: "extern-inputbox",
        props: {
            //前面标签显示的文本
            label: {
                type: String,
                default: ""
            },
            //尚未输入任何内容时候显示的文本
            placeholder: {
                type: String
            },
        },
        data() {
            return {
                value: "",
                checked: false
            };
        },
        methods: {
            oncheckbox() {
                this.$emit( 'oncheckbox', this.checked );
            },
            getState() {
                return {
                    "value": this.value,
                    "checked": this.checked
                };
            }
        }
    }
</script>

<style lang="scss" scoped>
    .content {
        display: flex;
        align-items: center;
    }

    .inputbox {
        border: 1px solid;
        margin-left: 8px;
    }

    .checkbox {
        margin-left: 8px;
    }
</style>
